<template>
  <div class="container">
    <DocHeader :title="title" :diagnosis="true" />
    <div class="content">
      <div class="flex mb8">
        <div>疼痛分类：</div>
        <el-radio-group v-model="pageData.radio1">
          <el-radio
            v-for="item in ['急性', '癌痛', '慢性非恶性疼痛（>6月）']"
            :key="item"
            :label="item"
            @click.native="onRadioChange($event, item, 'radio1')"
          ></el-radio>
        </el-radio-group>
      </div>
      <div class="flex mb8">
        <div>入院时疼痛情况：</div>
        <el-radio-group v-model="pageData.radio2">
          <el-radio
            v-for="item in ['无', '周期性疼痛', '活动时疼痛', '持续疼痛']"
            :key="item"
            :label="item"
            @click.native="onRadioChange($event, item, 'radio2')"
          ></el-radio>
        </el-radio-group>
      </div>
      <div class="flex mb8">
        <div>疼痛部位：</div>
        <div class="flex flex-1">
          <div
            v-for="item in ['A', 'B', 'C', 'D']"
            :key="item"
            class="flex-1 flex"
          >
            {{ item }} &nbsp;
            <input
              v-model="pageData[item]"
              style="width: 120px; border-bottom: 1px solid #000"
              class="inputBox txt-c"
            />
          </div>
        </div>
      </div>
      <div>
        <div class="mb8">疼痛性质：</div>
      </div>
      <!--  -->
      <div
        v-for="items in pageData.list1"
        :key="items.title"
        class="flex bort borl"
      >
        <div class="flex-2 borr cell">{{ items.title }}</div>
        <div class="flex-8 flex">
          <div
            v-for="(item, i) in items.list"
            :key="i"
            class="flex-1 borr cell"
          >
            <template v-if="items.key == 'date'">
              <DatePicker
                v-model="item.value"
                style="
                  width: 90%;
                  height: 22px;
                  padding: 0;
                  justify-content: center;
                "
                class="txt-c"
                select-interval
                value-format="timestamp"
                format="yyyy-MM-dd"
              />
            </template>
            <template v-else-if="items.key == 'time'">
              <DateSelection
                v-model="item.value"
                class="txt-c"
                style="
                  width: 90%;
                  height: 22px;
                  padding: 0;
                  justify-content: center;
                "
                value-format="HH:mm"
                :simple-op="true"
                :date-picker-show="false"
                :has-border="false"
                :display-num="!item.value"
                :need-time-icon="false"
                :noClear="false"
              />
            </template>
            <template v-else>
              <input v-model="item.value" class="inputBox txt-c" />
            </template>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="flex tac bort borr borl" style="height: 170px">
        <div style="margin-bottom: 10px">
          <img style="padding: 0 10px" height="60px" :src="pain1" />
          <img style="padding: 0 10px" height="60px" :src="pain2" />
          <img style="padding: 0 10px" height="60px" :src="pain3" />
          <img style="padding: 0 10px" height="60px" :src="pain4" />
          <img style="padding: 0 10px" height="60px" :src="pain5" />
          <img style="padding: 0 10px" height="60px" :src="pain6" />
        </div>
        <div>
          <div class="gradient"></div>
          <div
            class="flex"
            style="justify-content: space-between; margin-top: 5px"
          >
            <div v-for="i in 11" :key="i">{{ i - 1 }}</div>
          </div>
        </div>
        <div>
          <div
            class="flex"
            style="
              width: 500px;
              justify-content: space-between;
              margin-top: 10px;
            "
          >
            <div v-for="i in painList" :key="i">{{ i }}</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div
        v-for="(item, i) in pageData.list2"
        :key="item.title"
        class="flex bort borl"
      >
        <div class="flex-2 borr cell">{{ item.title }}</div>
        <el-radio-group v-model="item.radio" class="flex-8 flex radioGroup">
          <div v-for="items in 8" :key="items" class="flex-1 borr cell">
            <el-radio
              :label="items"
              @click.native="onRadioChange($event, items, 'list2', i)"
            ></el-radio>
          </div>
        </el-radio-group>
      </div>
      <div class="flex bort borl">
        <div class="flex flex-2 borr">
          <div class="flex-1 pad5 borb borr">12.遵医嘱用止痛药/PCA治疗</div>
          <div class="flex-1">
            <div class="cell">时间</div>
            <div class="bort cell">药品</div>
            <div class="bort cell">剂量</div>
            <div class="bort cell borb">途径</div>
          </div>
        </div>
        <div class="flex-8">
          <div v-for="items in pageData.list3" :key="items.title" class="flex">
            <div
              v-for="(item, i) in items.list"
              :key="i"
              class="flex-1 borr borb cell"
            >
              <template v-if="items.key == 'time'">
                <DateSelection
                  v-model="item.value"
                  class="txt-c"
                  style="
                    width: 100%;
                    height: 22px;
                    padding: 0;
                    justify-content: center;
                  "
                  value-format="HH:mm"
                  :simple-op="true"
                  :date-picker-show="false"
                  :has-border="false"
                  :display-num="!item.value"
                  :need-time-icon="false"
                  :noClear="true"
                />
              </template>
              <template v-else>
                <input v-model="item.value" class="inputBox txt-c" />
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="flex borl">
        <div class="flex-2 borr cell">13.拒绝治疗</div>
        <el-radio-group
          v-model="pageData.radio3"
          class="flex-8 flex radioGroup"
        >
          <div v-for="items in 8" :key="items" class="flex-1 borr cell">
            <el-radio
              :label="items"
              @click.native="onRadioChange($event, items, 'radio3')"
            ></el-radio>
          </div>
        </el-radio-group>
      </div>
      <div class="flex bort borl">
        <div class="flex-2 borr cell">责任护士签名</div>
        <div class="flex-8 flex">
          <div
            v-for="(items, i) in pageData.signList"
            :key="i"
            class="flex-1 borr cell"
          >
            <input v-model="items.value" class="inputBox txt-c" />
          </div>
        </div>
      </div>
      <div class="flex bort borb borl mb8">
        <div class="flex-2 borr cell">审核者签名</div>
        <div class="flex-8 borr cell">
          <input v-model="pageData.sign" class="inputBox txt-c" />
        </div>
      </div>
      <!--  -->
      <div class="mb8">
        药名：0=无&nbsp;&nbsp;1=盐酸吗啡即释片&nbsp;&nbsp;2=吗啡针&nbsp;&nbsp;3=盐酸羟考酮缓释片&nbsp;&nbsp;4=硫酸吗啡缓释片&nbsp;&nbsp;5=芬太尼透皮贴剂&nbsp;&nbsp;
      </div>
      <div class="mb8 flex">
        6=
        <input v-model="pageData.yao" class="inputBox txt-c" />
      </div>
      <div>
        评分方法：A.NRS&nbsp;&nbsp;B.面部表情评估量表法&nbsp;&nbsp;C.VRS
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'
import pain1 from './img/pain1.png'
import pain2 from './img/pain2.png'
import pain3 from './img/pain3.png'
import pain4 from './img/pain4.png'
import pain5 from './img/pain5.png'
import pain6 from './img/pain6.png'
export default defineComponent({
  components: {
    DocHeader,
    DateSelection,
    DatePicker
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    },
    formType: {
      type: String,
      default: 'add'
    },
    type: {
      type: String,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      painList: [
        '无疼痛',
        '有一点疼痛',
        '轻微疼痛',
        '疼痛明显',
        '疼痛较严重',
        '剧烈疼痛'
      ],
      pain1,
      pain2,
      pain3,
      pain4,
      pain5,
      pain6,
      pageData: ''
    })

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData()), jsonText)
      } else {
        nextTick(() => {
          state.pageData = baseData()
        })
      }
    }

    function onRadioChange(e, i, t, index) {
      if (t === 'list2') {
        if (e.target.tagName === 'INPUT') {
          state.pageData[t][index].radio = state.pageData[t][index].radio
            ? ''
            : i
        }
      } else {
        if (e.target.tagName === 'INPUT') {
          state.pageData[t] = state.pageData[t] ? '' : i
        }
      }
    }

    function getParams() {
      return state.pageData
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      getParams,
      onRadioChange
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  margin: 0 8px !important;
}

.container {
  padding: getpx(50);
  // margin: 10px auto;
  // width: calc(100% - 86px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  .content {
    margin-top: 8px;
  }
}

::v-deep .radioGroup {
  .el-radio__label {
    display: none;
  }
}

.gradient {
  width: 480px;
  height: 20px;
  background: linear-gradient(to right, #fff388, #df4934);
}

.flex {
  display: flex;
}

.cell {
  display: flex;
  font-size: 14px;
  height: 24px;
  justify-content: center;
  align-items: center;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.inputBox {
  border: none;
  // text-align: center;
  background-color: rgba($color: #000, $alpha: 0%);
  outline: none;
  width: 90%;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}

.pad5 {
  padding: 5px;
}

::v-deep {
  .el-date-editor {
    width: 100%;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      right: -8px;
      display: inline-block;

      .el-input__icon {
        line-height: 18px;
      }
    }
  }

  .error {
    color: #f56c6c;

    .el-input__inner {
      color: #f56c6c;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  .DateSelV2.disabled {
    background-color: #fff;
    border-color: transparent;
    color: #000;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
